<template>
	<div>
		<ul class="left-float">
      <li v-for="(item, index) in sexList" :key="index" :class="{selected: $store.getters.industry == item.id}">
        <div v-text="item.tradeName" class="font-sex" @click="chooseSex(index, item.id)"></div>
        <ul class="clearfix child" v-show="$store.getters.industry == item.id">
          <li v-for="(val, index) in item.tradeFloor" :key="index" v-text="val.floorName" class="clearfix sex-style" @click="onJump(index, val.id)" :class="{selected: currentFloorIndex === index}"></li>
        </ul>
      </li>
    </ul>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  props: {
    sexList: [Array]
  },
  data() {
    return {
      currentIndex: 0,
      key: []
    }
  },
  methods: {
    ...mapMutations(['updateIndexFloorIndex']),
    chooseSex(index, id) {
      this.$emit('on-trade', id)
      this.currentIndex = index
      this.$store.commit('updateUserInfoIndustry', id)
    },
    // 点击跳转楼层
    onJump(index) {
      this.updateIndexFloorIndex(index)
      document.body.scrollTop = this.aJumpPosition[index]
    }
  },
  created() {
    this.currentIndex = this.industry
  },
  computed: {
    ...mapGetters(['industry', 'legth', 'needScrolled', 'currentFloorIndex', 'aJumpPosition'])
  }
}
</script> 

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .left-float {
    position: fixed;
    top: 30%;
    left: 30px;
    z-index: 10;
    color: $color-white;
  }
  .left-float > li {
    width: 111px;
    font-size: 20px;
    text-align: center;
    line-height: 41px;
    margin-bottom: 4px;
    background-color: #555555;
    cursor: pointer;
    &.selected {
      background-color: $color-main;
    }
    &:hover {
      background-color:$color-main;
    }
    ul li {
      background-color: #555555;
      width: 111px;
      font-size: 18px;
      &.selected {
        background-color: #38B9D6;
      }
      &:hover {
        background-color: #38B9D6;
      }
    }
  }
  .sex-style {
    font-size: 18px;
    cursor: pointer;
  }
  .font-sex {
    font-size: 20px;
  }
</style>